<template>
    <el-container>
        <el-header style="padding: 0; height: 48px;">
            <HeaderSimple title="应用管理" />
        </el-header>
        <el-main style="padding: 0;">
            <el-card>
                <el-form :inline="true" :model="form">
                    <el-form-item label="应用名称">
                        <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="应用分类">
                        <el-input v-model="form.category" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getDataList()">查询</el-button>
                        <el-button @click="resetSearch()">重置</el-button>
                    </el-form-item>
                    <el-button style="float: right;" type="danger" @click="clickLogout()">退出</el-button>
                    <el-button style="float: right;" type="primary" @click="clickAdd()">添加</el-button>
                </el-form>
                <el-table :data="dataList" style="width: 100%;" max-height="580"
                    :header-cell-style="{background:'#fafafa',color:'#606266'}">
                    <el-table-column prop="name" label="名称" header-align="center" sortable align="center" width="120">
                    </el-table-column>
                    <el-table-column prop="description" label="介绍" header-align="center" sortable align="center"
                        width="120">
                        <template #default="scope">
                            <span
                                style="display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{scope.row.description}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="category" label="分类" header-align="center" sortable align="center"
                        width="140">
                    </el-table-column>
                    <el-table-column prop="recommend" label="推荐语" header-align="center" sortable align="center"
                        width="120">
                        <template #default="scope">
                            <span
                                style="display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{scope.row.recommend}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="icon" label="图标" header-align="center" sortable align="center">
                        <template #default="scope">
                            <img style="width: 32px; height: 32px" :src="scope.row.icon">
                        </template>
                    </el-table-column>
                    <el-table-column prop="size" label="大小" header-align="center" sortable align="center">
                    </el-table-column>
                    <el-table-column prop="version" label="版本" header-align="center" sortable align="center">
                    </el-table-column>
                    <el-table-column prop="developer" label="开发者" header-align="center" sortable align="center">
                    </el-table-column>
                    <el-table-column prop="installed" label="安装次数" header-align="center" sortable align="center">
                    </el-table-column>
                    <el-table-column prop="banners" label="宣传图" header-align="center" sortable align="center">
                        <template #default="scope">
                            <span>{{scope.row.banners.length}}张</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" header-align="center" align="center" width="160px">
                        <template #default="scope">
                            <el-button type="text" @click="clickBanners(scope.row.id, scope.row.banners)">宣传图
                            </el-button>
                            <el-divider direction="vertical" />
                            <el-popconfirm title="确定要删除吗?" @confirm="clickDelete(scope.row.id)">
                                <template #reference>
                                    <el-button type="text" style="color: red;">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination :current-page="current" :page-size="pageSize" :total="total"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle">
                </el-pagination>
            </el-card>
            <CreateApp ref="createApp" @load="getDataList()" />
            <EditApp ref="editApp" @load="getDataList()" />
        </el-main>
        <el-footer style="padding: 0;">
            <Footer />
        </el-footer>
    </el-container>
</template>

<script>
import { getSync, postSync } from '@/util/request'
import HeaderSimple from '@/components/HeaderSimple.vue'
import Footer from '@/components/Footer.vue'
import CreateApp from '@/views/admin/CreateApp.vue'
import EditApp from '@/views/admin/EditApp.vue'
let _this = null
export default {
    name: 'Apps',
    components: {
        HeaderSimple,
        Footer,
        CreateApp,
        EditApp
    },
    data() {
        return {
            form: {
                name: '',
                category: ''
            },
            dataList: [],
            current: 1,
            pageSize: 10,
            total: 0
        }
    },
    mounted() {
        _this = this
        _this.getDataList()
    },
    methods: {
        getDataList: () => {
            postSync('/api/app/search', {
                ..._this.form,
                'pageNum': _this.current,
                'pageSize': _this.pageSize
            }).then((res) => {
                _this.dataList = res.data.data
                _this.current = res.data.current
                _this.total = res.data.total
            })
        },
        resetSearch: () => {
            _this.form.name = ''
            _this.form.category = ''
            _this.getDataList()
        },
        clickAdd: () => {
            _this.$refs.createApp.show()
        },
        clickBanners: (id, banners) => {
            _this.$refs.editApp.show(id, banners)
        },
        clickDelete: (e) => {
            getSync('/api/app/delete?id=' + e).then((res) => {
                if (res.code == 200) {
                    _this.$notify({
                        title: '成功',
                        message: '删除成功',
                        duration: 3000,
                        type: 'success'
                    })
                    _this.getDataList()
                }
            })
        },
        clickLogout: () => {

        },
        sizeChangeHandle: (e) => {
            _this.pageSize = e
            _this.current = 1
            _this.total = 0
            _this.getDataList()
        },
        currentChangeHandle: (e) => {
            _this.current = e
            _this.getDataList()
        }
    }
}
</script>

<style lang="scss" scoped>

</style>